<template>
  <div class="leftNavibar">
    <div class="pipline" id="pipline">
    </div>
    <div class="kq" id="kq">
    </div>
  </div>
  <div class="rightNavibar">
    <div class="xj">
        <h2>今日巡检情况</h2>
        <el-table :data="taskData" style="width: 100%">
            <el-table-column prop="taskname" label="任务名称" width="100" />
            <el-table-column prop="people" label="巡检人" width="100" />
            <el-table-column prop="time" label="巡检时间" />
            <el-table-column prop="state" label="状态" />
        </el-table>
    </div>
    <div class="xh" id="xh">
    </div>
  </div>
</template>

<script setup>

import * as echarts from "echarts";
import { onMounted } from "vue";


onMounted(()=>{
    var currentdangerChart = echarts.init(document.getElementById("pipline"));
    currentdangerChart.setOption(createPipeBar("管网公里数",[["a","b","c"],[10,20,14]]));

    var piplineChart = echarts.init(document.getElementById("kq"));
    piplineChart.setOption(createDanger("今日考情情况",[5,2,10]));

    var xhChart = echarts.init(document.getElementById("xh"));
    xhChart.setOption(createXh("销号情况",[["设施情况","运行情况","违法情况"],[100,150,203]]))
})

function createPipeBar(title,data){
  let piplineoption = {
  title: {
    text: title,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: data[0],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: data[1]
    }
  ]
};
return piplineoption
}

function createDanger(title,data) {
  let currentdangeroption = {
    title: {
      text: title,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "horizontal",
      left: "left",
      top: "10%",
    },
    series: [
      {
        name: "隐患类型",
        type: "pie",
        radius: "50%",
        data: [
          { value: data[0], name: "迟到" },
          { value: data[1], name: "早退" },
          { value: data[2], name: "请假" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  return currentdangeroption
}

function createXh(title,data){
  let xhoption = {
  title: {
    text: title,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: data[0],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: data[1]
    }
  ]
};
return xhoption;
}
</script>

<style scoped>
.pipline,
.kq,
.xj,
.xh{
  width: 100%;
  height: 46%;
  margin-top: 10%;
}

.leftNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  background-color: aliceblue;
  left: 20px;
  z-index: 99;
  bottom: 25px;
}

.rightNavibar {
  position: fixed;
  height: 80%;
  width: 300px;
  background-color: aliceblue;
  z-index: 99;
  right: 20px;
  bottom: 25px;
}
</style>
